<template>
	<div class="wrap">
		<h1 class="title">公共设施预约</h1>

		<div class="pbulic">
			<!-- 可选设施 -->
			<el-table :data="publicMearch" stripe style="width: 100%">
				<el-table-column prop="publicName" label="设备名称" width="180" />
				<el-table-column prop="buildId" label="地点" width="180" />
				<el-table-column prop="publicCount" label="设备总数量" />
				<el-table-column prop="address" label="设备可用数量">
					<template #default="{ row }">
						{{ row?.publicCount - row?.publicAlready }}
					</template>
				</el-table-column>
				<el-table-column label="使用状态">
					<template #default="{ row }">
						<el-button type="primary" v-if="row?.publicCount - row?.publicAlready > 0" plain>可使用</el-button>
						<el-button type="danger" v-else plain>已满员</el-button>
					</template>
				</el-table-column>
				<el-table-column label="是否预约">
					<template #default="{ row }">
						<el-button
							@click="tragleDialog(row)"
							plain
							type="primary"
							v-if="row?.publicCount - row?.publicAlready > 0"
							>预约</el-button
						>
						<el-button plain type="primary" v-else disabled>预约</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 公共设施分页 -->
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="[5, 10, 15, 20]"
				small="small"
				:background="true"
				layout="total, sizes, prev, pager, next"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange" />

			<!-- 预约表单 -->
			<el-dialog v-model="dialogTableVisible" title="预约申请表" width="500">
				<el-form :model="applyForm" label-position="top">
					<el-row :gutter="20">
						<el-col :span="10">
							<el-form-item label="设备序号">
								<el-input v-model="applyForm.publicId" readonly></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="10">
							<el-form-item label="设备名称">
								<el-input :value="applyForm.publicName" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="80">
						<el-col :span="14">
							<el-form-item label="预约时间">
								<el-time-picker
									v-model="time"
									is-range
									range-separator="To"
									start-placeholder="Start time"
									end-placeholder="End time" />
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<template #footer>
					<el-button @click="submitApply" type="primary" plain>提交</el-button>
				</template>
			</el-dialog>
		</div>
	</div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { getPublicInfo, applyPublicSubscribe } from '@/utils/axios/stuReqest'
import { getPubOneBuild } from '@/utils/axios/getTotal'
import { useUserStore } from '@/stores/userStore'

const { userInfo } = useUserStore()

// 公共设施总数
const total = ref(0)

const publicMearch = ref([])



const pageSize = ref(5)
const currentPage = ref(1)
const dialogTableVisible = ref(false)
const applyForm = ref({})
const time = ref()

// 预约时间
const min = computed(() => {
	let time1 = new Date(time.value[0]).getTime()
	let time2 = new Date(time.value[1]).getTime()
	return (time2 - time1) / (1000 * 60)
})

const handleSizeChange = async (val) => {
	let { data } = await getPublicInfo({ currentPage: currentPage.value, pageSize: val })
	publicMearch.value = data
}
const handleCurrentChange = async (val) => {
	let { data } = await getPublicInfo({ currentPage: val, pageSize: pageSize.value })
	publicMearch.value = data
}

const tragleDialog = (val) => {
	dialogTableVisible.value = true
	applyForm.value = val
}

// 提交预约申请
const submitApply = async () => {

	await applyPublicSubscribe({ publicTime: min.value, publicId: applyForm.value.publicId })
	let { data } = await getPublicInfo({ currentPage: currentPage.value, pageSize: pageSize.value })
	publicMearch.value = data
	dialogTableVisible.value = false
}
onMounted(async () => {
	// 获取公共设施信息
	let { data } = await getPublicInfo({ currentPage: currentPage.value, pageSize: pageSize.value })
	let res = await getPubOneBuild({ buildId: userInfo.buildId })

	total.value = res.data
	publicMearch.value = data
})
</script>

<style scoped lang="sass">
.el-input
  width: 200px

// 预约对话框
.el-dialog
  border-radius: 10px

.el-pagination
  margin-top: 20px

.el-table
  box-shadow: 0 0 5px
  border-radius: 10px
.wrap
    border-radius: 10px
    // box-shadow: 0 0 5px #cccc
    height: 100%
    min-height: 600px
    padding: 20px

.title
    font-size: var(--title-size)
    font-weight: var(--fontweight)
    margin-bottom: 30px
</style>
